<template>
	<view v-if="show" class="global-audio-player">
		<!-- <view class="player-content">
    </view> -->
		<image :src="vuex_audio.currentTrack.coverImgUrl" mode="aspectFill" class="cover-image" @click="goDetail"></image>
		<view class="player-controls" :animation="animationData">
			<u-icon color="#FFFFFF" :name="vuex_audio_status.isPlaying ? 'pause' : 'play-right-fill'" @click="togglePlay" size="30"></u-icon>
			<u-icon color="#FFFFFF" name="rewind-right-fill" @click="nextTrack" size="35"></u-icon>
		</view>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
import { audioList } from '@/mock/home';
export default {
	name: 'GlobalAudioPlayer',
	computed: {
		show() {
			return this.vuex_audio.showGlobalPlayer;
		}
	},
	data() {
		return {
			animationData: {}
		};
	},
	methods: {
		...mapActions(['togglePlay', 'setCurrentTrack', 'playNext']),

		goDetail() {
			uni.navigateTo({
				url: '/pages/album/play?id=' + this.vuex_audio.currentTrack.id
			});
		},

		nextTrack() {
			// Ensure historyList is an array
			let newHistoryList = Array.isArray(this.vuex_audio.historyList) ? [...this.vuex_audio.historyList] : [];

			// Check if the current track is already in the history list
			const isTrackExist = newHistoryList.some((item) => item.id === this.vuex_audio.currentTrack.id);

			// If the track doesn't exist, add it to historyList
			if (!isTrackExist) {
				newHistoryList.push(this.vuex_audio.currentTrack);
			}

			// Update Vuex state with the new history list
			this.$u.vuex('vuex_audio.historyList', newHistoryList);

			// Proceed to the next track (ensuring playNext is handled correctly)
			this.playNext(); // Call playNext method to handle the actual track change
		}
	}
};
</script>

<style scoped lang="scss">
.global-audio-player {
	position: fixed;
	left: 20rpx;
	bottom: 200rpx;

	height: 80rpx;
	background-color: rgba(0, 0, 0, 0.7);
	border-radius: 40rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	padding: 0 5rpx;
	gap: 10rpx;
	z-index: 9999;

	.cover-image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.track-info {
		flex: 1;
		overflow: hidden;

		.track-title {
			font-size: 24rpx;
			font-weight: bold;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.track-author {
			font-size: 20rpx;
			color: #666;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.player-controls {
		display: flex;
		align-items: center;
		gap: 10rpx;
		margin-right: 10rpx;
	}
}
</style>
